<template>
  <div class="exchange-order">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <ul>
      <li @click="addressClick">
        <div>
          <p class="title">地址选择</p>
          <img src="../../assets/img/common/right_arrow_icon.png" alt="">
          <p class="sub-title">{{ (addressInfo === undefined) ? '请选择配送地址' : addressInfo.region}}</p>
        </div>
      </li>
      <li @click="timeClick">
        <div>
          <p class="title">时间选择</p>
          <img src="../../assets/img/common/right_arrow_icon.png" alt="">
          <p class="sub-title">{{ selectedTime === undefined ? '请选择配送时间' : (selectedTime.firstTime + '-' + selectedTime.secondTime) }}</p>
        </div>
      </li>
    </ul>
    <div class="order-input-container">
      <input type="button" value="确定兑换" @click="exchangeOrder">
    </div>
    <TimePicker v-bind:time-list="timeList" :first-index="firstSelectedIndex" :second-index="secondSelectedIndex" v-if="isShow" @pick-click="timePickerClick"/>
  </div>
</template>

<script>
  import { get_cookie } from 'assets/cookie/cookie'
  import * as recommend from 'api/recommend'
  import BackNavigation from './navigation.vue'
  import TimePicker from './time_picker.vue'

  export default {
    name: 'exchange-order',
    components: {
      BackNavigation,
      TimePicker
    },
    data() {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '兑换界面',
          rightTitle: ''
        },
        commodityInfo: {},
        timeList: [],
        addressInfo: undefined,
        isShow: false,
        selectedTime: undefined,
        firstSelectedIndex: 0,
        secondSelectedIndex: 0
      }
    },
    computed: {
      getBtnStatus() {
        return (this.commodityInfo.score <= this.$store.status.usrScore)
      }
    },
    methods: {
      addressClick() {
        console.log('addressClick')
        this.$router.push({
          path: '/address_admin',
          query: {
            isExchange: true
          }
        })
      },
      timeClick() {
        this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle',
          duration: 2000
        })
        recommend.getExchangeTimeListInfo().then(resault => {
          this.$indicator.close()
          if (resault.status === 200) {
            let resaultTimeList = []
            let firstIndex = 0
            for (let item of resault.data.data) {
              let childrenList = []
              let secondIndex = 0
              for (let childItem of item.times) {
                childrenList.push({
                  code: secondIndex,
                  name: childItem
                })
                if (this.selectedTime && this.selectedTime.secondTime === childItem) {
                  this.secondSelectedIndex = secondIndex
                }
                secondIndex++
//                if (item.day.indexOf('12') > 0) {
//                  childrenList.push({
//                    name: childItem
//                  })
//                } else if (item.day.indexOf('13') > 0) {
//                  childrenList.push({
//                    name: childItem
//                  })
//                } else {
//                  childrenList.push({
//                    name: childItem
//                  })
//                }
              }
              let resaultItem = {
                code: firstIndex,
                name: item.day,
                childs: childrenList
              }
              if (this.selectedTime && this.selectedTime.firstTime === resaultItem.name) {
                this.firstSelectedIndex = firstIndex
              }
              resaultTimeList.push(resaultItem)
              firstIndex++
            }
            this.timeList = resaultTimeList
            this.isShow = true
          }
        }).catch(resault => {
          this.$indicator.close()
          console.log(resault)
        })
      },
      timePickerClick (sendValue) {
        this.isShow = false
        console.log(sendValue)
        if (sendValue.firstTime) {
          this.selectedTime = sendValue
        } else {
          this.selectedTime = undefined
          this.firstSelectedIndex = 0
          this.secondSelectedIndex = 0
        }
      },
      exchangeOrder() {
        if (!get_cookie('key')) {
          this.$toast({
            message: '请登录后重试',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        if (this.addressInfo === undefined) {
          this.$toast({
            message: '请选择送货地址',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        if (this.selectedTime === undefined) {
          this.$toast({
            message: '请选择送货时间',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle',
          duration: 2000
        })
        let params = {
          token: get_cookie('key'),
          addrId: this.addressInfo.addrId,
          sendtime: this.selectedTime.firstTime + '-' + this.selectedTime.secondTime,
          id: this.$route.query.commodityId
        }
//        console.log(params)
//        return false
        recommend.postExchangeOrderInfo(params).then(resault => {
          this.$indicator.close()
          let exchangScore = this.$store.state.usrScore - parseInt(this.$route.query.commodityScore)
          if (resault.status === 200) {
            this.$store.commit('setUsrScore', exchangScore)
            this.$toast({
              message: '兑换成功',
              position: 'middle',
              duration: 1000,
              className: 'toast'
            })
            console.log(resault.data)
            console.log(this.$store.state.usrScore)
            this.$router.back()
          }
        }).catch(resault => {
          this.$indicator.close()
          console.log(resault)
        })
      }
    },
    watch: {
      addressInfo (newValue, oldValue) {
        console.log('addressInfo')
        console.log(newValue)
      }
    },
    created() {
    },
    activated() {
      this.addressInfo = this.$store.state.exchangeAddress
    }
  }
</script>

<style lang="scss">
  div.exchange-order {
    padding-top: 44px;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgb(233, 233, 233);

    >ul {
      width: 100%;
      height: auto;

      >li {
        margin-top: 10px;
        background-color: white;
        box-sizing: border-box;
        width: 100%;
        height: 44px;

        >div {
          background-color: white;
          padding: 0 15px 0 15px;
          width: 100%;
          height: 44px;

          >p.title {
            height: 44px;
            line-height: 44px;
            color: rgb(66, 66, 66);
            font-size: 14px;
            float: left;
          }

          >p.sub-title {
            margin-right: 10px;
            height: 44px;
            line-height: 44px;
            color: rgb(166, 166, 166);
            font-size: 14px;
            float: right;
          }

          >img {
            margin-top: 14.8px;
            float: right;
            height: 14.4px;
            width: 8.4px;
          }
        }
      }
    }

    >div.order-input-container {
      height: auto;
      width: 100%;
      padding: 30px 15px 0 15px;

      >input {
        position: relative;
        height: 44px;
        width: 100%;
        bottom: 0;
        border-radius: 5px;
        padding: 0 10px 0 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        background-color: rgb(27, 162, 232);
        color: white;
        border: 0 solid orange;
        -webkit-appearance: none;  /*去掉苹果的默认UI来渲染按钮*/
      }
    }
  }
</style>
